import React, { Component } from 'react';
import axios from 'axios';

import Search from './Search';
import Users from './Users';

export default class App extends Component {
  state = {
    users: [],
  }

  componentDidMount() {
    this.fetchUsers();
  }

  fetchUsers = async (keyword) => {
    const res = await axios.get(`/api/github/search/users?q=${keyword || 'h'}`);
    if (res && res.data) {
      this.setState({ users: res.data.items || [] });
    }
  }

  onSearch = async (keyword) => {
    this.fetchUsers(keyword);
  }

  render() {
    const { users } = this.state;

    return (
      <div className="container" style={{ margin: '20px auto' }}>
        <Search onSearch={this.onSearch} />
        <Users users={users} />
      </div>
    )
  }
}
